import React, { PureComponent, Fragment } from 'react';
import { Icon } from 'antd';
import classNames from 'classnames';
import styles from './Footer.less';

class FooterView extends PureComponent {
  render() {
    const { className } = this.props;
    const clsString = classNames(styles.globalFooter, className);

    const links = [
      {
        key: 'Pro 首页',
        title: 'Pro 首页',
        href: 'https://pro.ant.design',
        blankTarget: true,
      },
      {
        key: 'github',
        title: <Icon type="github" />,
        href: 'https://github.com/ant-design/ant-design-pro',
        blankTarget: true,
      },
      {
        key: 'Ant Design',
        title: 'Ant Design',
        href: 'https://ant.design',
        blankTarget: true,
      },
    ];

    const env = process.env.msg;

    const copyright = (
      <Fragment>
        Copyright <Icon type="copyright" /> 2019 Animix Blue Powered by Ant Design {env && env !== 'prod' ?  '[' + env + ']' : ''}
      </Fragment>
    );

    return (
      <footer className={clsString}>
        {links && (
          <div className={styles.links}>
            {links.map(link => (
              <a
                key={link.key}
                title={link.key}
                target={link.blankTarget ? '_blank' : '_self'}
                href={link.href}
              >
                {link.title}
              </a>
            ))}
          </div>
        )}
        {copyright && <div className={styles.copyright}>{copyright}</div>}
      </footer>
    );
  }
}

export default FooterView;
